<template>
  <div class="my-tag">
     <input
     v-focus
     v-if='isShow'
     @blur="isShow=false"
    class="input"
    :value='value'
    @keyup.enter="changeTxt($event)"
    type="text"
    placeholder="输入标签" 
    />
    <div v-else 
    @click='changeInp'
      class="text">
      {{value}}
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      value:String
    },
    data(){
      return{
        isShow:false,
      }
    },
    methods:{
      changeInp(){
        this.isShow=true
      },
      changeTxt(e){
        if (e.target.value.trim()==='') {
          return
        }
        this.$emit('input', e.target.value)
        this.isShow=false
      }
    }
  }
</script>

<style lang="less" scoped>
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
</style>